<template>
    <ul class="tabbar">
        <router-link :to="{name:item.name}" class="tabbar-item" 
            v-for="(item,index) in tabBarIcon" :key='index' 
            tag='li' active-class='active'>
            <img :src="item.url" alt="">
            <img class="active-img" :src="item.checked" alt="">
            <p>{{item.val}}</p>
        </router-link>
    </ul>
</template>
<script>
export default {
    name:"",
    data:()=>({
        tabBarIcon:[
            {
                url:require('../assets/img/首页.png'),
                checked:require('../assets/img/首页_red.png'),
                val:'首页',
                name:'Home'
            },
            {
                url:require('../assets/img/分类.png'),
                checked:require('../assets/img/分类_red.png'),
                val:'分类',
                name:'Classify'
            },
            {
                url:require('../assets/img/购物车.png'),
                checked:require('../assets/img/购物车_red.png'),
                val:'购物车',
                name:'Shopping'
            },
            {
                url:require('../assets/img/我的.png'),
                checked:require('../assets/img/我的_red.png'),
                val:'我的',
                name:'Mine'
            }
        ]
    })
}
</script>
<style scoped lang='scss'>
.tabbar{
    display: flex;
    height:0.49rem;
    width:100%;
    position: fixed;
    bottom: 0;
    background: rgba(255,255,255,0.90);
    box-shadow: inset 0 0 0 0 #E1E1E1;
    border-top:1px solid #ccc;
    .tabbar-item{
        display:flex;
        width:25%;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content : center;
        img{
            width:0.28rem;
            height:0.28rem;
            display: inline-block;
        }
        .active-img{
            display: none;
        }
        p{
            font-size: 0.1rem;
            color:#666;
            width:0.48rem;
            text-align: center;
        }
    }
    .active{
        img{
            display: none;    
        }
        .active-img{
            display: inline-block;
        }
        p{
            color:#ff0000;
        }
    }
}
</style>
